<template>
	<view class="payOrder">
		<view class="custom-nav-bar">
			<!-- 页面标题 -->
			<view class="nav-title">会员尊享</view>
		</view>
		<view class="payType">
			<view class="title">支付方式</view>
			<view class="weChatBox">
				<image src="../../static/img/detail/weixin-select.png" class="icon" mode=""></image>
				<view class="name">微信支付</view>
				<image src="../../static/img/active/select.png" class="select" mode=""></image>
			</view>
		</view>
		<view class="payAddress">
			<view class="addressinfo">
				<image src="/static/img/active/dizhi.png" mode=""></image>
				<p>{{shopName}}</p>
				<image src="/static/img/active/qiehuan.png" mode="" @click="changeShop"></image>
			</view>
			<view class="guize" @click="toGuize">
				规则说明
			</view>
		</view>
		<view class="secondaryCard" v-if="cardList.length != 0">
			<view :class="selectCard.id == item.id ? 'cardItem select' : 'cardItem'" v-for="(item,index) in cardList" :key="index" @click="changeSelectCard(item,index)">
				<!-- <image :src="item.image" class="image" mode=""></image> -->
				<view class="cardCenter">
					<view class="number">{{item.title}}</view>
					<view class="time">有效期{{item.days}}天</view>
				</view>
				<view class="money">¥ {{item.price}} </view>
			</view>
		</view>
		<view class="pay" v-if="cardList.length != 0" @click="payCard">
			{{selectCard ? '¥' + selectCard.price : ''}} 去支付
		</view>
		<view class="noData" v-if="cardList.length == 0">
			<image src="../../static/img/common/nodata.png" class="image"></image>
			<view class="text">该场馆还没有开启次卡活动～</view>
		</view>
		
		<!-- 未登录提示框 -->
		<view class="mask" v-if="!isLogin">
			<view class="login">
				<view class="bgc">
					<image class="bgc_img" src="/static/img/index/login-bgc.png" mode="widthFix"></image>
					<image class="img_login" src="/static/img/index/login.png" mode="widthFix"></image>
				</view>
				<view class="btn_login">
					<view class="tit">您还没有登录</view>
					<view class="tips">登录即刻开启快乐生活</view>
		
					<!-- #ifdef MP-WEIXIN -->
					<button @click="bindgetuserinfo" class="btn1">立即登录</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button @click="bindAuthorizeinfo" @error="onAuthError">立即登录</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		
		<uni-popup ref="infoPopup" type="bottom">
			<view class="infoPopup">
				<view class="popHeader">
					<view></view>
					<view class="title">请选择商户</view>
					<view class="close" @click="closePopup">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y>
					<view class="content">
						<view class="row" v-for="(item, index) in shopList" :key="index" @click="chooseShop(item)" :class="activeId == item.id ? 'active' : ''">
							<view class="name">{{item.venue_name}}</view>
							<view class="dizhi">
								<view class="addressxx">
									<image src="/static/img/active/address.png" mode=""></image>
									<span>{{item.address}}</span>
								</view>
								<text>{{item.distance}}km</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { payCard, getCardList, getShopList } from "@/api/active.js"
	import { wxLogin, apilyLogin } from '@/api/api.js';
	export default {
		data() {
			return {
				venues_id: null,
				cardList: [],
				shopList: [],
				activeId: '',
				selectCard: null,
				longitude: '',
				latitude: '',
				shopName: '',
				parentUserId: '',
				isLogin: false
			}
		},
		onLoad(options) {
			if (options.q) {
				let obj = {};
				let code = decodeURIComponent(options.q);
				if (code.indexOf('?') != -1) {
					let index = code.indexOf('?');
					code = code.substring(index + 1, code.length);
					code = code.split('&');
					code.forEach(v => {
						let arr = v.split('=');
						obj[arr[0]] = arr[1];
						obj[arr[1]] = arr[2];
						obj[arr[2]] = arr[3];
					});
					this.parentUserId = obj.parent_user_id;
					this.venues_id = obj.venues_id;
				}
			}
			if (options.parent_user_id) {
				this.parentUserId = options.parent_user_id;
			}
			if (options.venues_id) {
				console.log(options.venues_id, '---options.venues_id---');
				this.venues_id = Number(options.venues_id);
				// this.getCardList();
			}
			this.activeId = this.venues_id;
		},
		onShow() {
			// this.activeId = '';
			let token = uni.getStorageSync('token');
			if (token) {
				this.isLogin = true;
				this.getlocation();
			}
		},
		methods: {
			// 微信登录授权
			bindgetuserinfo() {
				uni.getUserProfile({
					desc: '正在获取',
					success: info => {
						uni.login({
							success: res => {
								let data = {
									rawData: info.rawData,
									code: res.code,
									iv: info.iv
								};
								wxLogin(data).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '授权成功'
										});
										this.isLogin = true;
										uni.setStorageSync('user', res.data.userInfo);
										uni.setStorageSync('token', res.data.userInfo.token);
										this.getlocation();
									}
								});
							}
						});
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			// 支付宝登录授权
			bindAuthorizeinfo() {
				my.getAuthCode({
					scopes: ['auth_user'],
					success: res => {
						apilyLogin({
							authCode: res.authCode
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '授权成功'
								});
								this.isLogin = true;
								uni.setStorageSync('user', res.data.userinfo);
								uni.setStorageSync('token', res.data.userinfo.token);
								// 判断是否有手机号
								// let phone1 = uni.getStorageSync('user').ali_mobile;
								// if (phone1) {
								// 	this.isPhone = true;
								// }
								// 判断是否支付押金
								this.getOrder();
							}
						});
					}
				});
			},
			getlocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.getShopList();
						// 调用后端接口根据得到的经纬度获取地址
						console.log(res, "根据经纬度获取地址");
					},
					// 若用户点击拒绝获取位置则弹出提示
					fail: (err) => {
						uni.showModal({
							content: '检测到您没打开获取位置功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											uni.showToast({
												title: '授权后请重新打开此页面',
												icon: 'none'
											})
										},
										fail: (err) => {
											console.log(err)
										}
									})
								} else {
									uni.showToast({
										title: '获取地理位置授权失败',
										icon: 'none',
										success: () => {
											// 返回上一页
											setTimeout(() => {
												uni.showToast({
													title: "返回上一页",
													icon: 'none'
												})
											}, 500)
										}
									})
								}
							}
						})
					},
				})
			},
			changeSelectCard(item) {
				this.selectCard = item
			},
			toGuize () {
				uni.navigateTo({
					url:'/pages/active/rulesDesc'
				})
			},
			changeShop () {
				this.$refs.infoPopup.open('bottom');
				this.getShopList();
			},
			closePopup() {
				this.$refs.infoPopup.close();
			},
			chooseShop(item) {
				this.activeId = item.id;
				this.shopName = item.venue_name;
				this.venues_id = item.id;
				this.getCardList();
				this.$refs.infoPopup.close();
			},
			//次卡支付
			payCard() {
				if (!this.selectCard) {
					return uni.showToast({
						icon: "none",
						title: "请选择需要购买的次卡"
					})
				}
				uni.showLoading({
					mask: true
				})
				payCard({
					id: this.selectCard.id,
					type: 2,
					parent_user_id: this.parentUserId
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: "支付成功"
							})
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 2000)
						},
						fail: function(err) {
							uni.hideLoading()
						}
					});
				})
			},
			getCardList() {
				getCardList({
					venues_id: this.venues_id
				}).then(res => {
					this.cardList = res.data;
				})
			},
			getShopList() {
				getShopList({
					lng: this.longitude,
					lat: this.latitude
				}).then(res => {
					this.shopList = res.data;
					if (!this.venues_id) {
						this.venues_id = res.data ? res.data[0].id : '';
						this.shopName = res.data ? res.data[0].venue_name : '';
					} else {
						this.shopList.map(item => {
							if (item.id == this.venues_id) {
								this.shopName = item.venue_name;
							}
						})
					}
					this.getCardList();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 800;
	font-size: 17px;
	color: #000000;
}
.noData {
	padding-top: 390rpx;
	margin: 0 auto;
	text-align: center;

	.image {
		width: 320rpx;
		height: 320rpx;
	}

	.text {
		font-size: 28rpx;
		color: #fff;
	}
}

.mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 99;
	background: rgba($color: #000000, $alpha: 0.3);
	display: flex;
	align-items: center;
	justify-content: center;

	.login {
		width: 600upx;
		height: 625upx;
		background: #ffffff;
		border-radius: 20upx;

		.bgc {
			width: 100%;
			height: 285upx;
			position: relative;

			.bgc_img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.img_login {
				width: 116upx;
				height: 134upx;
				position: absolute;
				top: calc(50% - 67upx);
				left: calc(50% - 58upx);
			}
		}

		.btn_login {
			width: 90%;
			margin: 30upx auto 0;
			text-align: center;

			.tit {
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 34upx;
				margin-top: 50upx;
			}

			.tips {
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 26upx;
				margin: 30upx 0;
			}

			button {
				width: 100%;
				height: 80upx;
				background: #3199ff;
				box-shadow: 0upx 8upx 12upx 6upx rgba(0, 101, 196, 0.16);
				border-radius: 40upx;
				color: #ffffff;
				font-size: 32upx;
				line-height: 80upx;
			}

			.exit {
				margin: 30upx 0;
			}
		}
	}
}

.payOrder {
	min-height: 100vh;
	// background-color: #F8F8F8;
	background: linear-gradient( 135deg, #FDF9D8 0%, #D0A858 39%, #BE8C3E 100%);
}

.payType {
	margin-bottom: 38rpx;
	.title {
		margin: 0rpx 28rpx;
		padding: 20rpx 0;
		font-weight: 800;
		font-size: 32rpx;
		color: #553108;
	}

	.weChatBox,
	.couponBox {
		width: 92%;
		height: 100rpx;
		border-radius: 28rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 28rpx;
		background: #FFFFFF;

		.icon {
			width: 48rpx;
			height: 48rpx;
		}

		.name {
			margin-left: 18rpx;
			flex: 1;
		}

		.discount {
			flex: 1;
			font-size: 28rpx;
			color: #F13933;
			text-align: right;
			margin-right: 18rpx;
		}

		.select,
		.arrow {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.couponBox {
		margin-top: 2rpx;
	}
}

.payAddress{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	.addressinfo{
		display: flex;
		image{
			width: 20px;
			height: 20px;
		}
		p{
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 0 10rpx;
		}
	}
	.guize{
		width: 60px;
		height: 20px;
		border-radius: 10px;
		border: 1px solid #FFF7D0;
		text-align: center;
		font-size: 11px;
		color: #FFF7D0;
		line-height: 20px;
	}
}

.secondaryCard {
	margin: 0rpx 28rpx;
	.cardItem {
		padding: 48rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background: #FFFFFF;
		background: url('http://cdn.zhaoliuwei.com/gongxiang/cardbg.png') no-repeat center;
		background-size: 100% 100%;

		.image {
			width: 92rpx;
			height: 92rpx;
			border-radius: 10rpx;
			margin-right: 16rpx;
		}

		.cardCenter {
			flex: 1;

			.number {
				font-weight: bold;
				font-size: 38rpx;
				color: #97601E;
			}

			.time {
				margin-top: 8rpx;
				font-size: 28rpx;
				color: #97601E;
			}
		}

		.money {
			font-weight: bold;
			font-size: 44rpx;
			color: #74450E;
		}
	}

	.select {
		background: url('http://cdn.zhaoliuwei.com/gongxiang/xuazhong.png') no-repeat center;
		background-size: 100% 100%;
		.cardCenter {
			flex: 1;
			.number {
				color: #fff;
			}
			.time {
				color: #fff;
			}
		}
		.money {
			color: #fff;
		}
	}
}

.pay {
	position: fixed;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 694rpx;
	height: 88rpx;
	// background: #3EB9FF;
	background: linear-gradient(133deg, #FAFCF4 0%, #E8D09D 45%, #F8EFCA 100%);
	font-weight: 500;
	font-size: 34rpx;
	color: #74450E;
	text-align: center;
	border-radius: 200rpx;
	line-height: 88rpx;
}

.infoPopup {
	background: #fff;
	padding: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;

	.popHeader {
		/* 不生效是因为没有加type */
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
		}

		.close {
			padding: 6rpx;
		}
	}

	scroll-view {
		max-height: 60vh;

		.content {
			padding: 20rpx;
			.row{
				margin-bottom: 60rpx;
				.name{
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 20rpx;
				}
				.dizhi{
					display: flex;
					justify-content: space-between;
					.addressxx{
						display: flex;
						align-items: center;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
						span{
							font-weight: 400;
							font-size: 26rpx;
							color: #969696;
						}
					}
					text{
						font-weight: 400;
						font-size: 26rpx;
						color: #969696;
					}
				}
			}
			.active{
				border-radius: 8px;
				border: 1px solid #000000;
				padding: 30rpx;
			}
		}
	}
}
</style>